<template>
	<view class="cont">
		<view class="cont-user u-p-40 bgInfo">
			<view class="user u-flex u-col-center radius12 text-white">
				<view class="user-logo" @longpress="longTap">
					<u-lazy-load
						class="logo u-skeleton-circle"
						border-radius="110"
						height="110" 
						:loading-img="placeholderSrc" 
						:image="userInfo.avatar || '/static/default_avatar.png'" 
						img-mode="aspectFill"></u-lazy-load>
				</view>
				<view class="user-con u-p-24 u-flex-1">
					<view class="title u-font-34">{{'点击登录账号'}}</view>
				</view>
				<!-- <view class="">
					用户协议 <u-icon name="arrow-right" size="28"></u-icon>
				</view> -->
			</view>
		</view>
		
		<view class="cont-box u-p-l-24 u-p-r-24">
			<!-- 账户余额 -->
			<view class="bg-black text-white radius12 u-p-t-40 u-p-b-40 u-p-l-30 u-p-r-30 u-flex u-col-center u-row-between">
				<view class="u-flex">
					<view class="u-font-24 u-tips-color">账户余额</view>
					<view class="u-p-l-20 text-warning">
						￥<text class="u-font-36">267.00</text>
					</view>
				</view>
				<view class="u-m-l-20 u-text-center" @click="openPage('/pages/center/agreement')">
					用户协议 <u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			
			<!-- 我要充值 -->
			<view class="radius12 u-p-24 bg-white u-m-t-24">
				<view class="u-p-b-24 u-border-bottom">我要充值</view>
				<view class="u-p-t-24 u-flex u-col-center u-row-between">
					<view class="u-flex u-col-center">
						<text class="u-font-24">充值金额：</text>
						<u-input 
							v-model="rechargeVal" 
							placeholder="0"
							:clearable="false"
							placeholder-style="fontSize: 38rpx"
							:custom-style="{fontSize: '38rpx'}"/>
					</view>
					<view class="">
						<u-button 
							type="success" 
							size="medium" 
							class="u-p-l-30 u-p-r-30"
							:custom-style="{fontSize: '28rpx',height: '60rpx'}">立即充值</u-button>
					</view>
				</view>
			</view>
			
			<!-- 快捷优惠充值 -->
			<view class="radius12 u-p-24 bg-white u-m-t-24">
				<view class="u-p-b-24">快捷优惠充值</view>
				<u-row gutter="16">
					<u-col span="4">
						<view class="grid u-text-center u-p-20">
							<view class="u-font-36">1000</view>
							<view class="u-font-22 u-m-t-8">送5%</view>
							<view class="u-font-22 u-m-t-8 u-tips-color">实得1050.0</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="grid u-text-center u-p-20">
							<view class="u-font-36">2000</view>
							<view class="u-font-22 u-m-t-8">送10%</view>
							<view class="u-font-22 u-m-t-8 u-tips-color">实得2200.0</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="grid u-text-center u-p-20">
							<view class="u-font-36">5000</view>
							<view class="u-font-22 u-m-t-8">送13%</view>
							<view class="u-font-22 u-m-t-8 u-tips-color">实得5650.0</view>
						</view>
					</u-col>
				</u-row>
				<view class="text-primary u-p-t-24 u-text-center">联系客服</view>
			</view>
			
			<view class="radius12 u-p-l-24 bg-white u-m-t-24">
				<u-cell-group :border="false">
					<u-cell-item 
						icon="bell-fill" 
						title="设置提醒时段及区域" 
						style="padding-left: 0"
						hover-class="none"
						@click="openPage('/pages/businessTools/remind')"></u-cell-item>
					<u-cell-item
						icon="setting-fill" 
						title="设置个人资料" 
						style="padding-left: 0"
						hover-class="none"
						:border-bottom="false"
						@click="openPage('/pages/center/information')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="radius12 u-p-l-24 bg-white u-m-t-24">
				<u-cell-group :border="false">
					<u-cell-item 
						icon="grid-fill" 
						title="账户明细" 
						style="padding-left: 0"
						hover-class="none"
						@click="openPage('/pages/center/account')"></u-cell-item>
					<u-cell-item 
						icon="integral-fill" 
						title="我的商机" 
						style="padding-left: 0"
						hover-class="none"
						@click="openPage('/pages/business/index', 'switch')"></u-cell-item>
					<u-cell-item
						icon="email-fill" 
						title="我的申诉退款" 
						style="padding-left: 0"
						hover-class="none"
						:border-bottom="false"
						@click="openPage('/pages/center/refund')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="radius12 u-p-l-24 bg-white u-m-t-24">
				<u-cell-group :border="false">
					<u-cell-item 
						icon="bag-fill" 
						title="已购买的服务" 
						style="padding-left: 0"
						hover-class="none"
						@click="openPage('/pages/center/service')"></u-cell-item>
					<u-cell-item 
						icon="thumb-up-fill" 
						title="金牌会员服务" 
						style="padding-left: 0" 
						hover-class="none"
						:border-bottom="false"
						@click="openPage('/pages/center/goldService')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="radius12 u-p-l-24 bg-white u-m-t-24">
				<u-cell-group :border="false">
					<u-cell-item 
						icon="more-circle-fill" 
						title="意见反馈" 
						style="padding-left: 0"
						hover-class="none"
						:border-bottom="false"
						@click="openPage('/pages/center/feedback')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="radius12 u-p-l-24 bg-white u-m-t-24">
				<u-cell-group :border="false">
					<u-cell-item 
						icon="rmb-circle-fill" 
						title="对公账户" 
						style="padding-left: 0"
						hover-class="none"
						@click="openPage('/pages/center/public')"></u-cell-item>
					<u-cell-item 
						icon="server-man" 
						title="关于我们" 
						style="padding-left: 0" 
						hover-class="none"
						:border-bottom="false"
						@click="openPage('/pages/center/aboutUs')"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				
				// 导航栏---------------
				scrollTop: 0,
				background: {
					background: '',
				},
				
				current_version: '',
				rechargeVal: 200,
				
				userInfo: {}
			}
		},
		onReady() {
			// 监听登录事件
			uni.$on(this.ENUM.EVENT_LOGIN_KEY, () => {
				this.getStorage()
			})
		},
		onLoad() {
			this.background.background = this.infoColorError
			
			this.getStorage()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onPullDownRefresh() {
			this.getStorage(false)
		},
		methods: {
			longTap() {
				if (this.current_version) {
					uni.showToast({
						title: this.current_version,
						icon: 'none'
					})
				}
			},
			getStorage(loading) {
				// 判断登录
				this.isLogin = true
			},
			openPage(url, type) {
				if (!this.isLogin) {
					// 操作
					return
				}
				this.$common.openPage(url, type)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(var(--window-bottom) + 10px);
	.user {
		position: relative;
		&-logo {
			flex: 0 0 110rpx;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.06);
		}
	}
	.bgInfo {
		&::before {
			height: 150%;
		}
	}
	&-box {
		position: relative;
	}
	.icon {
		width: 70rpx;
		height: 46rpx;
		&-copy {
			width: 28rpx;
			height: 28rpx;
			margin-left: 12rpx;
		}
		&-arrow {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.grid {
		color: $u-type-success;
		border: 1px solid $u-type-success;
		border-radius: 4rpx;
	}
}
</style>
